import React from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import {
  Button,
  Card,
  Modal,
  Spin
} from 'antd'
import List from "./List";
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import OrderFilterUnExpand from 'components/Filter/NormalFilter';
import LwjCardTable from 'components/LwjCardTable/LwjCardTable';
import styles from './List.less';

const coupons = ({ location, dispatch, coupon, loading }) => {

  location.query = queryString.parse(location.search);

  console.info("model测试：" + coupon)
  const { items, pagination, visible, auditVisible, detailVisible, currentItem, optionType, auditType, fileVisible } = coupon;
  const breadcrumbList = [
    {
      title: '营销管理'
    }, {
      title: '优惠券'
    }
  ];
  const setOptionType = (type) => {
    dispatch({
      type: 'coupon/setOptionType',
      payload: type
    })
  }
  const onShowDetail = (record) => {
    setOptionType("detail")
    dispatch({
      type: 'coupon/setDetailVisible',
      payload: true
    })
    dispatch({
      type: 'coupon/detail',
      payload: record.id
    })
    // dispatch({
    //   type: 'coupon/setCurrentItem',
    //   payload: record
    // })
  }
  const onShowAudit = (record) => {
    onShowDetail(record)
    setOptionType("audit")
  }
  const doAudit = (type, record) => {
    dispatch({
      type: 'coupon/audit',
      payload: record
    })
  }
  const approve = (id, values) => {
    dispatch({
      type: 'coupon/audit',
      payload: {
        id: id,
        values: values
      }
    })
  }
  const deny = (id) => {
    dispatch({
      type: 'coupon/deny',
      payload: id
    })
  }
  const listProps = {
    dataSource: items,
    global: loading.global,
    loading: loading.effects['coupon/query'],
    pagination,
    pageChangeAction: 'coupon/query',
    dispatch,
    location,
    onShowDetail: onShowDetail,
    auditVisible,
    detailVisible,
    currentItem,
    optionType,
    onShowAudit,
    doAudit,
    approve,
    deny,
    auditType,
    fileVisible
  };
  const modalProps = {
    distributorVisible: visible,
    doAdd: (values) => {
      dispatch({
        type: 'coupon/add',
        payload: values
      })
    },
    setDistributorVisible: (option) => {
      dispatch({
        type: 'coupon/setVisible',
        payload: option
      })
    }
  }
  // 定义筛选属性 表单相关
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'couponsNum',
        title: '优惠券ID'
      }, {
        type: 'select',
        id: 'couponsStatus',
        title: '优惠券状态',
        options: [
          {
            value: "",
            name: '全部'
          }, {
            value: 'UN_CHECKED',
            name: '待审核'
          }, {
            value: 'CAN_USE',
            name: '可用'
          }, {
            value: 'USED',
            name: '已使用'
          }, {
            value: 'ABANDONED',
            name: '已作废'
          }, {
            value: 'FAIL_CHECK',
            name: '审核不通过'
          }
        ]
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'coupon/query',
        payload: {
          ...value
        }
      })
    }
  }

  return (
    <PageHeaderLayout title="优惠券" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div className={styles.tableList}>
          <OrderFilterUnExpand {...filterProps} />
          <Button style={{ marginBottom: 10 }} type="primary" onClick={() => {
            dispatch({
              type: 'coupon/toAdd',
            })
          }}>添加优惠券</Button>
          <List {...listProps} />
        </div>
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(({ coupon, app, loading }) => ({ coupon, app, loading }))(coupons)
